import React, { PureComponent } from 'react';
import router from 'umi/router';
import moment from 'moment';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Input, Radio, Spin, Row, Col, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import FooterToolbar from '@/components/FooterToolbar';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import HdlRemark from '@/pages/components/HdlRemark';
import ContactPage from '../../AccuFundService/AccuServiceHandle/ContactPage';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input; // 文本域

@connect(({ dimission: { detail }, loading }) => ({
  detail,
  loading: loading.models.dimission,
}))
class ContactBegin extends PureComponent {
  state = { proVisible: false };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { dimissionId } = location.query;
    dispatch({
      type: 'dimission/getDimission',
      payload: { dimissionId },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      data: {
        list: [],
        pagination: {
          current: 1,
          pageSizes: 10,
          pageSize: 10,
          total: 10,
        },
      },
      detail: {
        empDimiContHisList: [],
        empDimission: {},
        ordHdlRemarkDtos: [],
      },
      detailInfor: {
        empDimiContHisList: [],
        empDimission: {},
        ordHdlRemarkDtos: [],
      },
      dimHistory: [],
      proListData: {
        list: [],
        pagination: {
          current: 1,
          pageSizes: 10,
          total: 0,
        },
      },
      proBaseList: {},
      proFbList: [],
    };
    dispatch({
      type: 'dimission/updateData',
      payload: opermars,
    });
  }

  save = () => {
    const { form, dispatch, detail } = this.props;
    const { empId, vno, dimissionId } = detail.empDimission;
    form.validateFieldsAndScroll((err, values) => {
      if (err) return;
      dispatch({
        type: 'dimission/contact',
        payload: { ...values, empId, vno, empDimissionId: dimissionId },
      });
    });
  };

  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  showModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  proHandleOk = () => {
    this.toggleProModal(false);
  };

  cancel = () => {
    router.push(`/careermanage/dimission/index`);
  };

  render() {
    const {
      form: { getFieldDecorator },
      detail: { empDimission, empDimiContHisList, ordHdlRemarkDtos },
      detail,
      loading,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 2,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 12,
        },
      },
    };
    const formItemLayout2 = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 3,
        },
        md: {
          span: 2,
        },
        lg: {
          span: 2,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 12,
        },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
        md: {
          span: 3,
        },
        lg: {
          span: 3,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 12,
        },
      },
    };
    const socialAccuColumn = [
      {
        title: '产品',
        dataIndex: 'assName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'assName',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'areaName',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        key: 'endDate',
        render: text => moment(text).format('YYYY-MM-DD'),
      },
    ];
    const { proVisible } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title={<span>基本信息</span>}>
            <Form layout="inline">
              <Row>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>姓名：</span>
                  {empDimission.empName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>证件号：</span>
                  {empDimission.idNo || '--'}
                </Col>
                <Col md={8}>
                  <FormItem
                    {...formItemLayout1}
                    colon={false}
                    label={
                      <span
                        style={{
                          display: 'inline-block',
                          width: 'auto',
                          textAlign: 'left',
                          textAlignLast: 'left',
                        }}
                      >
                        电话：
                      </span>
                    }
                    style={{ width: '100%' }}
                  >
                    {getFieldDecorator('mobile', {
                      rules: [
                        {
                          required: true,
                          message: '请填写正确的联系电话',
                          pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,12}$/,
                        },
                      ],
                      initialValue: empDimission.mobile,
                    })(<Input placeholder="请输入" style={{ width: 200 }} maxLength={12} />)}
                  </FormItem>
                </Col>
                <Col md={8}>
                  <FormItem
                    {...formItemLayout2}
                    colon={false}
                    label={<span style={{ display: 'inline-block' }}>邮箱：</span>}
                    style={{ width: '100%' }}
                  >
                    {getFieldDecorator('email', {
                      rules: [{ required: false, type: 'email', message: '应为邮箱格式' }],
                      initialValue: empDimission.email,
                    })(<Input placeholder="请输入" maxLength={50} style={{ width: 200 }} />)}
                  </FormItem>
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>服务类型：</span>
                  {empDimission.serTypeName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>客户名称：</span>
                  {empDimission.custName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>地区：</span>
                  {empDimission.areaName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>是否离职联系：</span>
                  {empDimission.contactFlagName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>离职日期：</span>
                  {moment(empDimission.evaDate).format('YYYY-MM-DD') || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>所属客服：</span>
                  {empDimission.creName || '--'}
                </Col>
                <Col md={8} style={{ height: '48px', lineHeight: '48px' }}>
                  <span style={{ color: 'rgba(0,0,0,.85)' }}>离职原因：</span>
                  {empDimission.dimissionReason || '--'}
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title={<span>社保公积金信息</span>}>
            <Table
              columns={socialAccuColumn}
              style={{ width: '50%', marginTop: 8 }}
              dataSource={detail.rsgnDets}
              pagination={false}
            />
          </Card>

          {empDimiContHisList.length ? (
            <Card title={<span>联系记录</span>}>
              <ContactPage contactList={empDimiContHisList} dimDetail />
            </Card>
          ) : null}
          <HdlRemark hdlRemark={ordHdlRemarkDtos} />
        </Spin>
        <Card title={<span>联系内容</span>}>
          <Form layout="inline" {...formItemLayout}>
            <FormItem label="联系状态:" style={{ marginBottom: 10 }}>
              {getFieldDecorator('contactStatus', {
                rules: [{ required: true }],
                initialValue: 2,
              })(
                <RadioGroup onChange={this.commissionTypeChange}>
                  <Radio value={2}>联系中</Radio>
                  <Radio value={3}>联系完成</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <br />
            <FormItem label="联系内容:">
              {getFieldDecorator('remark', {
                rules: [{ required: true, max: 300, message: '请输入少于300字的联系内容' }],
              })(<TextArea placeholder="请输入少于300字的联系内容" style={{ width: '500px' }} />)}
            </FormItem>
          </Form>
        </Card>
        {proVisible && (
          <ProModal
            selectedRows={[{ empName: detail.empDimission.empName }]}
            selectedRowKeys={[`${detail.empDimission.dimissionId}`]}
            busiType="2"
            onOk={this.proHandleOk}
            onCancel={() => this.toggleProModal(false)}
            isProType
          />
        )}
        <FooterToolbar extra={<Button onClick={() => this.showModal(true)}>标记问题人员</Button>}>
          <Button onClick={() => this.cancel()}>返回</Button>
          <Button type="primary" style={{ marginLeft: 8 }} onClick={() => this.save()} loading={loading}>
            提交
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
const ContactBeginform = Form.create()(ContactBegin);
export default ContactBeginform;
